<!--
 * @Author: lihaogn
 * @Date: 2021-08-29 21:13:15
 * @LastEditTime: 2022-01-11 22:03:01
 * @LastEditor: lihaogn
 * @Description: 设置-抽屉
 * @FilePath: \lix-admin-vue2\src\views\system\setting\SystemSettingDrawer.vue
-->
<template>
  <el-drawer
    :title="title"
    :visible.sync="drawerVisible"
    :size="380"
    @close="handleDrawerClose"
  >
    <div class="gl-drawer-body" v-loading="loading">
      <div class="gl-drawer-main">
        <!-- 设置主题色 -->
        <div class="gl-sub-title">颜色</div>
        <div class="sub-body">
          <!-- <div class="sub-body-row">
            <span class="sub-body-label">风格</span>
            <el-radio-group
              v-model="themeStyle"
              @change="handleThemeStyleChange"
            >
              <el-radio :label="0">亮</el-radio>
              <el-radio :label="1">暗</el-radio>
            </el-radio-group>
          </div> -->

          <div class="sub-body-row">
            <span class="sub-body-label">主题色</span>
            <el-color-picker
              v-model="color"
              size="mini"
              :predefine="predefineColors"
              color-format="hex"
              @change="handleMainColorChange"
            >
            </el-color-picker>
          </div>
        </div>
        <!-- 设置工作模式 -->
        <!-- <div class="gl-sub-title">工作模式</div>
        <div class="sub-body">
          <div class="sub-body-row">
            <span class="sub-body-label">模式</span>

            <el-radio-group v-model="workMode" @change="toggleWorkMode">
              <el-radio :label="true">前端</el-radio>
              <el-radio :label="false">后端</el-radio>
            </el-radio-group>
          </div>
        </div> -->
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { makeNewStyle } from '@/utils/theme'
import { drawerMixin } from '../../../mixins/drawer'
export default {
  name: 'setting-drawer',
  mixins: [drawerMixin],
  props: {},
  data() {
    return {
      themeStyle: 0,
      color: '',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      workMode: true
    }
  },
  computed: {
    ...mapGetters(['mainColor'])
  },
  created() {
    console.log('created...', this.mainColor)
    this.color = this.mainColor
  },
  mounted() {
    console.log('mounted...')
  },
  destroyed() {
    console.log('destroyed...')
  },
  methods: {
    ...mapMutations({
      setMainColor: 'theme/setMainColor',
      toggleWorkMode: 'app/toggleWorkMode'
    }),
    /**
     * @author: lihaogn
     * @Date: 2021-12-15 23:50:30
     * @description: 抽屉关闭事件
     * @param {*}
     * @return {*}
     */
    handleDrawerClose() {
      this.$emit('update:visible', false)
    },
    /**
     * @author: lihaogn
     * @Date: 2021-11-23 16:28:43
     * @description: 切换主题风格
     * @param {*} val:Number - 风格选项值
     * @return {*}
     */
    handleThemeStyleChange(val) {
      this.$message.info('该功能尚未开发')
    },
    /**
     * @author: lihaogn
     * @Date: 2021-11-23 16:28:58
     * @description: 修改主题色
     * @param {*} val:string - 颜色值
     * @return {*}
     */
    handleMainColorChange(val) {
      makeNewStyle(val)
      this.setMainColor(val)
    }
  }
}
</script>
<style lang="less" scoped>
.sub-body {
  font-size: 14px;
  .sub-body-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .sub-body-label {
      display: inline-block;
      width: 56px;
      margin-right: 12px;
      text-align: end;
    }
  }
}
</style>
